<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="<%=request.getContextPath()%>/jquery/jquery-3.4.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/font-awesome.min.css" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/emoji.css" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/userhome.css" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/user.css" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css" />
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/vue-2.6.12.js"> </script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/vue-router-3.4.9.js"> </script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/myajax.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/qs-6.9.4.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/axios-0.21.0.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/index.js"></script>
    <style>
        #user_content{
            width: 900px;
            background-color: white;
            text-align: center;
            margin-top: 100px;
            margin-left: 250px;
        }
        div#user_content div form label{width:70px;text-align: right;}
        div#user_content div form input, div#user_content div form select,div#user_content div input {
            width: 50px;
        }
        div#user_content div form input[type="file"]{display:inline-block;}
        div#user_content div form button{margin-top:20px;}
        @import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="pre-2" id="big_img">
            <img src="http://findfun.oss-cn-shanghai.aliyuncs.com/images/head_loading.gif" class="jcrop-preview jcrop_preview_s">
        </div>
        <div id="cover" style="min-height: 639px;">
            <div id="user_area">
                <div id="home_header">
                    <a href="/goods/homeGoods">
                        <h1 class="logo"></h1>
                    </a>
                    <a href="/ZuaMarket/page/good/main.html">
                        <div class="home"></div>
                    </a>
                </div>
                <!--
                    侧边栏
                -->
                <div id="user_nav">
                    <div class="user_info">
                        <div class="head_img">
                            <img src="<%=basePath%>img/photo1.jpg">
                        </div>
                        <div class="big_headimg">
                            <img src="">
                        </div>
                        <span class="name">{{user.username}}</span>
                        <span class="school">郑州航空工业管理学院</span>
                        <span class="name">闲置数量：{{number}}</span>
                    </div>
                    <div class="home_nav">
                        <ul>
                            <router-link to="/user/personal">
                                <a href="#">
                                    <li class="set">
                                        <div></div>
                                        <span>个人设置</span>
                                        <strong></strong>
                                    </li>
                                </a>
                            </router-link>
                            <router-link to="/user/newGood">
                                <a href="#">
                                    <li class="store">
                                        <div></div>
                                        <span>发布物品</span>
                                        <strong></strong>
                                    </li>
                                </a>
                            </router-link>
                            <router-link to="/user/myGoods">
                                <a href="#">
                                    <li class="second">
                                        <div></div>
                                        <span>我的闲置</span>
                                        <strong></strong>
                                    </li>
                                </a>
                            </router-link>
                            <router-link to="/user/myOrder">
                                <a href="">
                                    <li class="/user/myOrders">
                                        <div></div>
                                        <span>我的订单</span>
                                        <strong></strong>
                                    </li>
                                </a>
                            </router-link>
                            <router-link to="/user/myCollectGoods">
                                <a href="#">
                                    <li class="fri">
                                        <div></div>
                                        <span>我的收藏</span>
                                        <strong></strong>
                                    </li>
                                </a>
                            </router-link>
                            <li>
                                <div></div>
                                <span>测试</span>
                                <strong></strong>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--
                   主体部分
                -->
                <div id="user_content">
                            <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
    <%--个人设置组件--%>
    <template id="personal">
        <form @submit.prevent="changeUser">
            <input v-model="user.id" hidden="hidden">
            <h1>查看和修改个人信息</h1>
            <hr/><br/>
            昵称：<input v-model="user.username">
            <br/><br/><hr/><br/>
            邮箱：<input v-model="user.email">
            <br/><br/><hr/><br/>
            密码：<input v-model="user.password" type="password">
            <br/><br/><hr/><br/>
            手机：<input v-model="user.phone">
            <br/><br/><br/>
            <button type="submit" class="btn btn-success">提交并修改信息</button>
            <br/><br/><br/>
        </form>
    </template>
    <%--我的闲置组件--%>
    <template id="myGoods">
        <div>
            <div v-if="goods==null">
                你还没有发布过闲置物品，快去发布吧
            </div>
            <div class="col-sm-6 col-md-4" v-for="good in goods">
                <div class="thumbnail">
                    <img :src="good.imgUrl" style="height: 230px" class="img-circle">
                    <div class="caption">
                        <h3>{{good.name}}</h3>
                        <p>原价：{{good.realPrice}}&nbsp;&nbsp;&nbsp;&nbsp;现价:{{good.price}}</p>
                        <p><a class="btn btn-default" role="button" @click="remove(good.id)">删除</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <%--我的收藏组件--%>
    <template id="myCollectGoods">
        <div>
            <div class="col-sm-6 col-md-4" v-for="good in goods">
                <div class="thumbnail">
                    <img :src="good.imgUrl" style="height: 230px" class="img-circle">
                    <div class="caption">
                        <h3>{{good.name}}</h3>
                        <p>原价：{{good.realPrice}}&nbsp;&nbsp;&nbsp;&nbsp;现价:{{good.price}}</p>
                        <p><a class="btn btn-default" role="button" @click="newOrder(good.id)">购买</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <%--发布闲置组件--%>
    <template id="newGood">
        <div>
            <form @submit.prevent="newGood">
                <h1>添加新的闲置</h1>
                <hr/>
                <label>物品名：</label><input v-model="good.name">
                <br/><hr/>
                <label>物品分类：</label>
                <select v-model="good.catelogId">
                    <option value="1" selected="selected">闲置数码</option>
                    <option value="2">校园代步</option>
                    <option value="3">电器日用</option>
                    <option value="4">图书教材</option>
                    <option value="5">美妆衣物</option>
                    <option value="6">运动娱乐</option>
                    <option value="7">票券小物</option>
                </select>
                <br/><hr/>
                <label>原价：</label><input v-model="good.realPrice">
                <br/><hr/>
                <label>现价：</label><input v-model="good.price">
                <br/><hr/>
                <label>描述：</label><input v-model="good.describle">
                <br/><hr/>
                <label>图片：</label>
                <div style="height: 180px;width: 180px;margin-left: 380px">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8989/ZuaMarket/file/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <button type="submit" class="btn btn-success">发布物品</button>
                <br/><br/><br/>
            </form>
        </div>
    </template>
    <%--我的订单组件--%>
    <template id="myOrder">
        <div>
            <h1>我的订单</h1>
            <table class="table table-hover">
                <thead>
                    <th>编号</th>
                    <th>物品名</th>
                    <th>价格</th>
                    <th>创建时间</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="order in orders">
                        <th>{{order.id}}</th>
                        <th>{{order.goodName}}</th>
                        <th>{{order.price}}</th>
                        <th>{{order.createTime}}</th>
                        <th v-if="order.state==1">已支付</th>
                        <th v-if="order.state==0">未支付</th>
                        <th v-if="order.state==2">已完成</th>
                        <th v-if="order.state==1"><button type="button" class="btn btn-danger btn-xs" @click="remove(order.id)" style="margin-left: 40px">删除</button></th>
                        <th v-if="order.state==0">
                            <form action="alipay.trade.page.pay.jsp" method="post">
                                <input id="WIDout_trade_no" name="WIDout_trade_no" v-model="order.id" type="hidden" />
                                <input id="WIDsubject" name="WIDsubject" value="用户的订单" type="hidden" />
                                <input id="WIDtotal_amount" name="WIDtotal_amount" v-model="order.price" type="hidden" />
                                <input id="WIDbody" name="WIDbody" value="用户的订单" type="hidden"/>
                                <div>
                                    <button type="submit" class="btn btn-primary btn-xs" style="margin-top: 0px">支付</button>
                                    <button type="button" class="btn btn-danger btn-xs" @click="remove(order.id)" style="margin-top: 0px">删除</button>
                                </div>
                            </form>
                        </th>
                        <th v-if="order.state==2"><button type="button" class="btn btn-danger btn-xs" @click="remove(order.id)" style="margin-left: 40px">删除</button></th>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    <script>
        const personForm={
            template:"#personal",
            data(){
                return{
                    user:{}
                }
            },
            created(){
                this.selectMessage()
            },
            methods:{
                selectMessage(){
                    axios.get("/ZuaMarket/User/user/center").then(resp=>{
                        let data = resp.data
                        this.user = data.user
                    })
                },
                changeUser(){
                    console.log(this.user)
                    axios.put("/ZuaMarket/User/user/changeUser",this.user).then(resp=>{
                        let data = resp.data
                        let state = data.state
                        console.log(data.user)
                        console.log(state)
                        if(state=="success"){
                            this.user = data.user
                            alert("修改成功")
                        }else if(state=="failed"){
                            alert("修改失败")
                        }
                    })
                }
            }
        }
        const myGoodsForm={
            template: "#myGoods",
            data(){
                return{
                    goods:[],
                    good:{}
                }
            },
            created(){
                this.selectMyGoods()
            },
            methods:{
                selectMyGoods(){
                    axios.get("/ZuaMarket/User/user/selectGoods").then(resp=>{
                        let data = resp.data
                        this.goods = data.goods
                    })
                },
                remove(i){
                    let isDelete = confirm("确定删除吗?");
                    if (!isDelete) {
                        return;
                    }
                    axios.delete("/ZuaMarket/Good/good/"+i).then(resp => {
                        let responseData = resp.data;
                        console.log(responseData);
                        if (responseData.status == "success") {
                            alert("删除成功");
                            this.selectMyGoods();
                        } else {
                            alert("删除失败");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
        }
        const myCollectGoodsForm={
            template: "#myCollectGoods",
            data(){
                return{
                    goods:[],
                    good:{}
                }
            },
            created(){
                this.selectMyGoods()
            },
            methods:{
                selectMyGoods(){
                    axios.get("/ZuaMarket/User/user/selectCollectGoods").then(resp=>{
                        let data = resp.data
                        this.goods = data.goods
                    })
                },
                /*购买物品*/
                newOrder(id){
                    console.log(id)
                    axios.get("/ZuaMarket/Good/user/newOrder/"+id).then(resp=>{
                        let data = resp.data
                        let status = data.status
                        console.log(status)
                        if(status=="noLogin"){
                            alert("请先登陆")
                        }
                        if(status=="success"){
                            alert("订单生成成功，请到我的订单进行支付")
                        }
                    })
                }
            }
        }
        const newGoodForm= {
            template: "#newGood",
            data() {
                return {
                    good: {},
                    imageUrl: ''
                }
            },
            methods:{
                newGood(){
                    console.log(this.good)
                    axios.put("/ZuaMarket/Good/user/addGood",this.good).then(resp=>{
                        let data = resp.data
                        let state = data.state
                        console.log(state)
                        if(state=="success"){
                            alert("商品发布成功，请等待有人购买")
                        }
                    })
                },
                handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                    console.log(res.fileName)
                    this.good.imgUrl=res.fileName
                    console.log(this.good)
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                }
            }
        }
        const myOrderForm= {
            template: "#myOrder",
            data() {
                return {
                    orders:[],
                    order:{}
                }
            },
            created(){
                this.selectMyOrders()
            },
            methods:{
                selectMyOrders(){
                    axios.get("/ZuaMarket/User/user/getOrders").then(resp=>{
                        let data = resp.data
                        this.orders = data.orders
                    })
                },
                remove(i){
                    console.log(i)
                    let isDelete = confirm("确定删除吗?");
                    if (!isDelete) {
                        return;
                    }
                    axios.delete("/ZuaMarket/Order/order/"+i).then(resp => {
                        let responseData = resp.data;
                        console.log(responseData);
                        if (responseData.state == "success") {
                            alert("删除成功");
                            this.selectMyOrders();
                        } else {
                            alert("删除失败");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
        }
        const router = new VueRouter({
            routes:[
                {path: "/",redirect:"/user/personal"},
                {path: "/user/personal",component: personForm},
                {path: "/user/myGoods",component: myGoodsForm},
                {path: "/user/myCollectGoods",component: myCollectGoodsForm},
                {path: "/user/newGood",component: newGoodForm},
                {path: "/user/myOrder",component: myOrderForm}
            ]
        })
        const v = new Vue({
            el: "#app",
            data: {
                user:{},
                number:{},
            },
            router,
            created(){
                this.selectMessage()
            },
            methods:{
                selectMessage(){
                    axios.get("/ZuaMarket/User/user/center").then(resp=>{
                        let data = resp.data
                        this.user = data.user
                        this.number = data.num
                    })
                }
            }
        })
    </script>
</body>
</html>